<script setup lang="ts">
import { ref } from "vue";

interface DataItem {
    label: string
    value: number
}

const dataItems = ref<DataItem[]>([
    { label: "当日总收益", value: 1200 },
    { label: "当月总收益", value: 7800 },
    { label: "今日共享收益", value: 300 },
    { label: "本月共享收益", value: 1500 },
    { label: "今日外卖收益", value: 500 },
    { label: "本月外卖收益", value: 3400 },
    { label: "今日民用收益", value: 400 },
    { label: "本月民用收益", value: 2900 }
])

const init = (module: any) => {
    console.log(module)
    let obj = JSON.parse(module)
    if(module){
        dataItems.value.forEach((item: any) => {
            if(item.label == '当日总收益'){
                item.value = Number(obj.todaySharedRevenue) + Number(obj.todayTakeawayRevenue) + Number(obj.todayCivilRevenue)

            }
            if(item.label == '当月总收益'){
                item.value = Number(obj.monthSharedRevenue) + Number(obj.monthTakeawayRevenue) + Number(obj.monthCivilRevenue)
            }
            if(item.label == '今日共享收益'){
                item.value = Number(obj.todaySharedRevenue)
            }
            if(item.label == '本月共享收益'){
                item.value = Number(obj.monthSharedRevenue)
            }
            if(item.label == '今日外卖收益'){
                item.value = Number(obj.todayTakeawayRevenue)
            }
            if(item.label == '本月外卖收益'){
                item.value = Number(obj.monthTakeawayRevenue)
            }
            if(item.label == '今日民用收益'){
                item.value = Number(obj.todayCivilRevenue)
            }
            if(item.label == '本月民用收益'){
                item.value = Number(obj.monthCivilRevenue)
            }


        })
    }

}

defineExpose({
    init
})
</script>

<template>
    <div class="right-bottom-container">
        <div class="data-grid">
            <div v-for="(item, index) in dataItems" :key="index" class="data-item">
                <div class="data-circle">
                    <div class="data-value">{{ item.value }}</div>
                </div>
                <div class="data-label">{{ item.label }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.right-bottom-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    // background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.8) 100%);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        // background: radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // gap: 15px;
}

.data-circle {
    width: 100%;
    height: 100%;
    // width: 120px;
    // height: 120px;
    // border-radius: 50%;
    background-image: url('@/assets/img/iconBG.png');
    // background-size: cover;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    // box-shadow: 0 0 20px rgba(0, 212, 255, 0.4), inset 0 0 20px rgba(0, 212, 255, 0.2);
}

.data-value {
    font-size: 32px;
    font-weight: 700;
    color: #00d4ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
    z-index: 1;
}

.data-label {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>